<template>
  <div class="">
    <div class="dk-title dk-blue">
      迪康金诺vue组件
    </div>
    <div class="dk-container">
      <div class="dk-row">
        <div class="dk-col-md-3">
          <div class="dk-menu">
            <ul>
              <li v-for="(option, index) in options" @click="select(index)" :class='{choosed :$store.state.currentGuide == index}'>
                <router-link :to='option.route'>
                  {{option.title}}
                </router-link>
              </li>
            </ul>
          </div>
        </div>
        <div class="dk-col-md-9">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  import store from'../store/store';
  export default {
    data() {
      return {
        options:[
          {route:"/component/start", title:"快速上手"},
          {route:"/component/layout", title:"布局"},
          {route:"/component/icon", title:"图标"},
          {route:"/component/form", title:"表单"},
          {route:"/component/table", title:"表格"},
          {route:"/component/color", title:"颜色"},
          {route:"/component/button", title:"按钮"},
          {route:"/component/message", title:"消息提示"}
        ],
      }
    },
    store,
    methods:{
      select:function(index){
        var guide = {};
        guide.cur = index;
        sessionStorage.setItem('currentGuide',JSON.stringify(guide))
        this.$store.commit("changeGuide", index);
        console.log(this.$store.state.currentGuide)
      }
    },
    created:function(){
      var cur = sessionStorage.getItem('currentGuide');
      console.log(cur)
      if(cur){
        this.$store.commit("changeGuide", JSON.parse(cur).cur);
      }

    }
  }
</script>
<style media="screen">
  .choosed a{
    color:blue !important;
  }
  .dk-title{
    line-height:100px;
    font-size:30px;
    text-align:center;
    height:100px;
    color:white;
    margin-bottom:20px;
  }
  .dk-menu ul{
    zoom:1;
    list-style:none;
    line-height: 30px;
    padding-left:20px;
  }
  .dk-menu ul:after{
    content:"";
    display: block;
    clear: both;
  }
  .dk-menu ul li a{
    text-decoration:none;
    color:black;
  }
</style>
